<template>
	<view class="jifenShare">
		<view class="paySuccess">
			<text class="a">领取好友积分</text>
			<text class="b">输入手机号即可领取积分</text>
		</view>
		<view class="shareImg">
			<image src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/872ee202010161815446802.png" mode=""></image>
			<text>{{fen}}</text>
		</view>
		<view class="inputBox" v-if="!draw">
			<view class="phone">
				<input type="number" v-model="info.phone" placeholder="输入手机号" placeholder-style="color:#ECC382;font-weight:normal" />
			</view>
			<view class="vcode">
				<input type="number" v-model="info.code" placeholder="输入验证码" placeholder-style="color:#ECC382;font-weight:normal"
				 @confirm="submit" />
				<text class="veri" v-show="isCheck" @tap="isCheck && yzm()">获取验证码</text>
				<text class="ver" v-show="!isCheck">{{ time }}秒后可再次获取</text>
			</view>
		</view>
		<view class="btnBox" v-if="!draw">
			<view class="btn full" @tap="submit">立即领取</view>
		</view>
		<view class="drawed" v-if="draw">
			已被领取光了~
		</view>
		<view class="userDesc">
			<text class="a">积分使用三部曲</text>
			<view class="b">
				<view class="b-a">
					<text class="b-a-a after">01</text>
					<text class="b-a-b">下载APP</text>
				</view>
				<view class="b-a">
					<text class="b-a-a after">02</text>
					<text class="b-a-b">去积分商城</text>
				</view>
				<view class="b-a">
					<text class="b-a-a">03</text>
					<text class="b-a-b">兑换商品</text>
				</view>
			</view>
		</view>
		<view class="lebal" @tap="download">
			前往下载国家普惠社区APP >>
		</view>
	</view>
</template>

<script>
	import {
		registerVerify
	} from "@/api/user.js";
	import {shareDraw,shareJudge } from "@/api/pay.js"
	export default {
		data() {
			return {
				draw: false, //是否被人领取
				orderId: "",
				fen: "",
				isCheck: true,
				time: 60,
				info: {
					phone: "",
					code: ""
				}
			};
		},
		onLoad(option) {
			this.orderId = option.id
			this.fen = option.fen
			shareJudge(this.orderId).then(res => {
				if (res.data.status == "NODRAW") {
					this.draw = false
				} else {
					this.draw = true
				}
			})
		},
		methods: {
			yzm() {
				let _self = this;
				if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(_self.info.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					});
					return false;
				}
				uni.showLoading({
					mask:true
				})
				registerVerify({
					phone: _self.info.phone,
					type:"draw"
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: res.msg
					});
					_self.isCheck = false;
					_self.countdown();
				})
			},
			countdown() {
				let _self = this;
				if (_self.time == 0) {
					_self.isCheck = true;
					_self.time = 60;
				} else {
					_self.time--;
					setTimeout(_self.countdown, 1000);
				}
			},
			submit() {
				uni.showLoading({
					mask:true
				})
				shareDraw({
					phone:this.info.phone,
					captcha: this.info.code,
					orderId: this.orderId
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:"领取成功"
					})
				})
			},
			download() {
				uni.navigateTo({
					url:"./appDownLoad"
				})
			}
		}
	}
</script>
<style>
	page {
		width: 750rpx;
		height: 1700rpx;
		background-color: #FAD28F;
		background-image: url(https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-10/2be4f202010190943126015.png);
		background-repeat: no-repeat;
		background-size: 750rpx;
	}
</style>
<style lang="scss" scoped>
	.jifenShare {
		display: flex;
		flex-direction: column;
		align-items: center;
		.paySuccess {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 150rpx;

			.a {
				font-size: 88rpx;
				font-family: Lantinghei SC;
				font-weight: 800;
				color: #F89810;
			}

			.b {
				margin-top: 20rpx;
				width: 460rpx;
				height: 51rpx;
				background: #F89810;
				border-radius: 20rpx;
				text-align: center;
				line-height: 51rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}

		.shareImg {
			margin-top: 100rpx;
			width: 560rpx;
			height: 474rpx;
			position: relative;

			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 560rpx;
				height: 474rpx;
			}

			text {
				position: absolute;
				left: 0;
				top: 300rpx;
				width: 100%;
				text-align: center;
				font-size: 48rpx;
				font-weight: 500;
				color: #fff;

				&::before {
					content: "+";
					font-size: 48rpx;
					font-weight: 500;
				}

				&::after {
					content: " 积分";
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		.inputBox {
			margin-top: 140rpx;
			display: flex;
			flex-direction: column;
			font-size: 30rpx;

			.phone {
				width: 600rpx;
				height: 80rpx;
				background: #FFFFFF;
				opacity: 0.6;
				border-radius: 45rpx;

				input {
					padding-left: 30rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 45rpx;
					color: #F89810;
					font-weight: bold;
				}
			}

			.vcode {
				margin-top: 30rpx;
				width: 600rpx;
				height: 80rpx;
				background: #FFFFFF;
				opacity: 0.6;
				border-radius: 45rpx;
				position: relative;

				input {
					padding-left: 30rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 45rpx;
					color: #F89810;
					font-weight: bold;
				}

				.veri {
					position: absolute;
					right: 30rpx;
					top: 0rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #F89810;
					z-index: 9;
				}

				.ver {
					position: absolute;
					right: 30rpx;
					top: 0rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #F89810;
					z-index: 9;
				}
			}
		}

		.btnBox {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn {
				width: 600rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				font-weight: 500;
				line-height: 80rpx;
				font-size: 30rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
			}

			.full {
				background: #F9BE2E;
				color: #fff;
			}
		}
		.drawed{
			margin: 200rpx 0;
			font-size: 50rpx;
			font-weight: bold;
			color: #97641B;
		}
		.userDesc {
			width: 600rpx;
			height: 180rpx;
			background: #FFF5E6;
			border: 4rpx dashed #FDE3B9;
			border-radius: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.a {
				padding: 20rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: #D39742;
			}

			.b {
				display: flex;
				justify-content: space-between;
				width: 500rpx;

				.b-a {
					display: flex;
					flex-direction: column;
					align-items: center;

					.b-a-a {
						width: 40rpx;
						height: 40rpx;
						border: 2rpx solid #FDE3B9;
						border-radius: 50%;
						font-size: 24rpx;
						color: #E7B971;
						text-align: center;
						font-weight: bold;
						line-height: 40rpx;
					}

					.after {
						position: relative;

						&::after {
							position: absolute;
							right: -134rpx;
							top: 19rpx;
							content: "";
							width: 100rpx;
							height: 0rpx;
							border: 2rpx dashed #FDE3B9;
						}
					}

					.b-a-b {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #D39742;
					}
				}
			}
		}

		.lebal {
			margin-top: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #97641B;
		}
	}
</style>
